<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东轮播图</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .banner {
            width: 790px;
            height: 340px;
            border: 3px solid black;
            margin: 20px auto;
            position: relative;
        }
        
        .banner ul li {
            position: absolute;
            left: 0px;
            top: 0px;
            display: none;
        }
        
        .banner ol {
            position: absolute;
            left: 20px;
            bottom: 20px;
        }
        
        .banner ol li {
            float: left;
            width: 20px;
            height: 20px;
            background-color: blue;
            border-radius: 50%;
            margin-right: 5px;
            text-indent: -999em;
            cursor: pointer;
        }
        
        .banner ol li.active {
            background-color: chartreuse;
        }
        
        .left,
        .right {
            font-size: 100px;
            color: #fff;
            text-decoration: none;
            position: absolute;
            top: 50%;
            margin-top: -60px;
        }
        
        .left {
            left: 20px;
        }
        
        .right {
            right: 20px;
        }
        
        a.left:hover,
        a.right:hover {
            color: black;
        }
    </style>
</head>

<body>
    <div class="banner">
        <!-- 8张大图 -->
        <ul>
            <li style="display: block;"><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
            <li><img src="img/6.jpg" alt=""></li>
            <li><img src="img/7.jpg" alt=""></li>
            <li><img src="img/8.jpg" alt=""></li>
        </ul>
        <!-- 8个小圆圈 -->
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ol>
        <!-- 两个左右切换箭头 -->
        <a href="javascript:;" class="left">&lt;</a>
        <a href="javascript:;" class="right">&gt;</a>
    </div>
    <script>
        //一.效果功能
        //1.8个小圆圈对应8张图片，鼠标移入进行图片的切换。
        //2.点击左右箭头，按照升序和降序进行图片的切换。
        //3.图片自动轮播 - 定时器

        //思路 - 索引思维。
        var banner = document.querySelector('.banner');
        var picList = document.querySelectorAll('.banner ul li'); //8张大图
        var btnList = document.querySelectorAll('.banner ol li'); //8张大图
        var left = document.querySelector('.left');
        var right = document.querySelector('.right');
        var num = 0; //存储索引

        // 1.8个小圆圈对应8张图片，鼠标移入进行图片的切换。
        // btnList添加鼠标移入的事件
        for (var i = 0; i < btnList.length; i++) { //i:0-7
            btnList[i].index = i; //给每一个小圆圈添加自定义的属性。属性的值就是索引。
            btnList[i].onmouseover = function() {
                //this.index:当前小圆圈对应的索引值。
                num = this.index; //存储当前的索引

                //鼠标移入那个小圆圈，那个小圆圈添加active类名。
                //this:当前操作的小圆圈。
                for (var j = 0; j < btnList.length; j++) {
                    btnList[j].className = ''; //清空所有小圆圈上面的类名。
                    picList[j].style.display = 'none'; //隐藏所有的图片
                }
                //当前的小圆圈添加active
                // this.className = 'active';
                btnList[num].className = 'active';
                picList[num].style.display = 'block'; //配合小圆圈显示对应的图片。
                //8个小圆圈的索引和8张图片的索引是一致的。如果能够找到当前点击的小圆圈的索引，找到图片的索引。
                //this表示当前的小圆圈，如果在每一个小圆圈里面添加一个自定义的属性。而且这个自定义的属性就是小圆圈的索引。
            };
        }

        //2.点击左右箭头，按照升序和降序进行图片的切换。
        right.onclick = function() {
            num++;
            if (num > btnList.length - 1) {
                num = 0;
            }
            for (var j = 0; j < btnList.length; j++) {
                btnList[j].className = ''; //清空所有小圆圈上面的类名。
                picList[j].style.display = 'none'; //隐藏所有的图片
            }
            btnList[num].className = 'active';
            picList[num].style.display = 'block';
        }


        left.onclick = function() {
            num--;
            if (num < 0) {
                num = btnList.length - 1;
            }
            for (var j = 0; j < btnList.length; j++) {
                btnList[j].className = ''; //清空所有小圆圈上面的类名。
                picList[j].style.display = 'none'; //隐藏所有的图片
            }
            btnList[num].className = 'active';
            picList[num].style.display = 'block';
        }
    </script>
</body>

</html>